<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Tabs - Metro UI :: Popular HTML, CSS and JS library</title>

</head>
<body class="cloak">
<nav data-role="appbar">
    <span class="app-bar-item">Tabs</span>
    <div class="app-bar-item no-hover">
        <input type="checkbox" data-role="theme-switcher" data-state="dark"/>
    </div>
</nav>
<div class="container">
    <div class="example">
        <div class="text-center p-10">
            <button class="button" onclick="openTabByTarget('#home')">Home</button>
            <button class="button" onclick="openTabByTarget('#profile')">Profile</button>
            <button class="button" onclick="openTabByTarget('#links')">Links</button>
        </div>
        <ul
                id="tabs"
                data-role="tabs"
                data-expand="true"
                data-on-tab="onTab"
                data-on-tab-close="console.log('close', arguments)"
                data-on-tab-open="console.log('open', arguments)"
                data-update-uri="true"
        >
            <li id="1"><a href="#home">Home</a></li>
            <li id="2"><a href="#profile">Profile</a></li>
            <li id="3"><a href="#links">Links</a></li>
        </ul>
        <div class="tabs-targets">
            <div id="home">Home</div>
            <div id="profile">Profile</div>
            <div id="links">Links</div>
        </div>
    </div>

    <div class="example mt-4">
        <ul data-role="tabs" data-expand="true">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

    <div class="example mt-4">
        <ul data-role="tabs" data-expand="true" data-type="text">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

    <div class="example mt-4">
        <ul data-role="tabs" data-expand="true" data-type="group">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

    <div class="example mt-4">
        <ul data-role="tabs" data-expand="true" data-type="pills">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

    <div class="example mt-10">
        <h2>Linked Tabs</h2>
        <div class="row">
            <div class="cell-md-6">
                <ul id="tabs1" data-role="tabs" data-link="engine" data-expand="true">
                    <li><a href="#npm_1">npm</a></li>
                    <li><a href="#pnpm_1">pnpm</a></li>
                    <li><a href="#yarn_1">yarn</a></li>
                    <li><a href="#bun_1">bun</a></li>
                </ul>
                <div>
                    <div id="npm_1">NPM</div>
                    <div id="pnpm_1">PNPM</div>
                    <div id="yarn_1">YARN</div>
                    <div id="bun_1">BUN</div>
                </div>
            </div>
            <div class="cell-md-6">
                <ul id="tabs2" data-role="tabs" data-link="engine" data-expand="true">
                    <li><a href="#npm_2">npm</a></li>
                    <li><a href="#pnpm_2">pnpm</a></li>
                    <li><a href="#yarn_2">yarn</a></li>
                    <li><a href="#bun_2">bun</a></li>
                </ul>
                <div>
                    <div id="npm_2">NPM</div>
                    <div id="pnpm_2">PNPM</div>
                    <div id="yarn_2">YARN</div>
                    <div id="bun_2">BUN</div>
                </div>
            </div>
        </div>

        <div class="example mt-4">
            <ul data-role="tabs" data-expand="true" class="tabs-red">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </div>
    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
    function openTabByTarget(target){
        Metro.getPlugin('#tabs', 'tabs').openByTarget(target)
    }
    
    function onTab(tab, href, element){
        console.log(tab, href, element)
    }
</script>
</body>
</html>
